import React from 'react';
import ReactDOM from 'react-dom';
import {connect} from 'react-redux';
import FolderStore from "../stores/FolderStore";
import * as actionCreators from '../action_creators'
import * as folderStore from '../core';
    /*
    var FolderItem = React.createClass({
        handleClick: function(event) {          
            if(this.props.handleClick){
                this.props.handleClick(this.props.data);
            }
           event.stopPropagation();
        },
        render: function() {
            var data = this.props.data;   
            var className = classNames({"disabled" : !data.id});  
            
            return (<li onClick={this.handleClick} className={className}><a href="#"><span style={{maxWidth: '80px', lineHeight:'13px'}} className="ellipsis">{data.name}</span></a></li>)     
        }
    });
*/
    var BrotherItem = React.createClass({
        onClick: function(event){
           // FolderStore.setCurFolder(this.props.data);      
            event.stopPropagation();    
        },
        render: function() {
            var data = this.props.data;
            return (
                    <li onClick={this.onClick} className="btn-upload-new-version">
                        <a>
                            <i className="fa fa-folder"></i><span className="width-50 ellipsis span-lin-blok">{data.get("name")}</span>
                        </a>
                    </li>
                )
        }
    })

    var FolderItem = React.createClass({     
        getInitialState: function () {           
            var brotherFolder = [];
            if (this.props.lastest){
                brotherFolder = FolderStore.getBrotherFolder(this.props.data); 
            }            
            return {
                editable: false,
                mounting : false,
                brotherFolder : brotherFolder
            };
        }, 
        startRename: function(){
            if (!this.state.mounting) return;
            if (this.props.data.path == "/"){
                UCX_Utils.toast('warning', i18n.t("{0} can not be rename".format(this.props.data.name)));
                return;
            }
            var _this = this;
            this.setState({editable: true});
            _.delay(function(){
                $(_this.refs.input).setCursorPosition({index:-1});
            }, 100);       
            
        },
        onKeyUp: function(event){           
            if (event.keyCode == 13){
                this.refs.input.blur();
                event.preventDefault();
            }          
        },
        onPropertiesChanged: function(event, data){
            if (data.id == this.props.data.id){
                this.forceUpdate();
            }
        },
        componentDidMount: function(){
            FolderStore.propertiesChanged(this.onPropertiesChanged);
            this.state.mounting = true;
        },
        componentWillUnmount: function(){
            FolderStore.propertiesChanged(this.onPropertiesChanged, false);
            this.state.mounting = false;
        },
        endRename: function(){
            if (!this.state.mounting) return;
            this.setState({editable: false});
            var newValue = $(this.refs.input).val();
            window.rename(this.props.data, newValue);
            this.props.data.name = newValue;
        },    
        onClick: function() {
            //FolderStore.setCurFolder(this.props.data)
        },
        render: function() {
            var data = this.props.data;      
            var brotherItems = [];          
            if (this.props.brother) {
                this.props.brother.forEach((folder, index) => {               
                    brotherItems.push(<BrotherItem key={index} data={folder}></BrotherItem>)            
                })       
            }

            var nameItem;
            if (this.state.editable){
               return (
                <li className="active" style={{position:'relative'}}>
                    <input ref="input" onKeyUp={this.onKeyUp} onBlur={this.endRename} defaultValue={data.name} style={{height:'27px', lineHeight:'27px'}}></input>
                </li>)
            }                          

            if (brotherItems.length > 0){
                return (
                    <li onClick={this.onClick} className="active" style={{position:'relative'}}>
                        <a href="javascript:void(0)" className="dropdown-toggle" data-toggle="dropdown">
                            <span style={{display:'inline-block'}} className="ellipsis">{data.name}</span>
                            <span className="caret m-left10"></span>
                        </a>
                        <ul className="dropdown-menu">
                           {brotherItems}
                        </ul>
                    </li>)     
            }
            else{               
                var className = classNames({"disabled" : !data.id});  
                return (
                    <li onClick={this.onClick} className={className}>
                        <a href="javascript:void(0)">
                            <span style={{display:'inline-block'}} className="ellipsis">{data.name}</span>
                        </a>
                    </li>
                )
            }
        }
    });

export const FolderBar = React.createClass({
        getInitialState: function () {    
            return {}        
        },             
        onRename: function(event, data){
            if( this.refs[data.id]){
                this.refs[data.id].startRename();
            }
        },
        componentDidMount: function() {           
            FolderStore.renameAction(this.onRename);
        },
        componentWillUnmount: function(){
            FolderStore.renameAction(this.onRename, false);
        },
        render: function () {
            var path = this.props.path;                     
            var items = [];         
            if (path) {
                var _this = this;                                                  
                var ellipsis = false;                
                path.forEach((node, index) => {    
                    if (index == 0){       
                        items.unshift(<FolderItem ref={node.get("id")} key={node.get("id")} data={node.toJS()} brother={this.props.brother}></FolderItem>)   
                    }
                    else if(index < 3 || index == path.length-1){                          
                        items.unshift(<FolderItem ref={node.id} key={node.get("id")} data={node.toJS()} lastest={false}></FolderItem>)     
                    }   
                    else if (!ellipsis){
                        ellipsis = true;
                        items.unshift(<FolderItem key={index} data={{name:"…"}}></FolderItem>)   
                    }            
                });               
            }                     
            return (
                <div id="folder-bar" className="breadcrumb_wrap pull-left">
                <ul className="breadcrumb n-p m-bot0 font-si16" >
                    {items}                   
                </ul>
                </div>
            )
        }
});

function mapStateToProps(state) {
    var curFolderId = state.get("curFolderId");
    var curFolder = folderStore.getFolderById(state.get("folderTree"), curFolderId);
    return {
        folder: curFolder,
        path : folderStore.getFolderPath(state.get("folderTree"), curFolderId),
        brother: folderStore.getBrotherFolder(state.get("folderTree"), curFolderId)
    };
}

export const FolderBarContainer = connect(
  mapStateToProps,
  actionCreators
)(FolderBar);

   